<template>
    <div id="bg">
        <div id="top">
            <!-- <van-icon name="arrow-left" id="icon"/> -->
            <van-nav-bar left-arrow id="icon" @click-left="onClickLeft"></van-nav-bar>
        </div>
        <div id="body">
            <div id="tx">
                <img src="/company/head_common.png" alt="">
            </div>
            <button id="btn" v-model='n' @click=onactive :class="{active
            : n}">{{gz}}</button>
            <br><br>
            <h4>jingle设计</h4>
            <div id="bq">
                <span>5年从业经验</span>
                <span>965人想找他设计</span>
            </div>
            <div id="guanzhu">
                <span>关注 <b>6565</b></span>
                <span>粉丝 <b>{{m}}</b></span>
                <span>获赞与收藏 <b>9856</b></span>
            </div>
            <van-divider />
            <div>
                <h4>作品(10)</h4>
                <div id="anli">
                    <div class="xiaoguo" v-for="n in 10" :key="n">
                        <img src="/company/sheji1-2.jpg" alt="" @click=onimg>
                        <p>梦中情房102平的奶油风效果图出来啦</p>
                    </div>
                </div>
                <router-link to="/interact">
                <van-button round type="info">免费咨询</van-button>
                </router-link>
            </div>
        </div>
    </div>
</template>

<script>
import { ImagePreview } from 'vant';
    export default {
        data() {
            return {
                n:false,
                gz:'+ 关注',
                m:2150,
            }
        },
        methods:{
            onClickLeft() {
            this.$router.back();
            },
            onactive(){
                this.n = !this.n
               if(this.gz== '+ 关注'){
                this.gz = '已关注'
                this.m++
                this.$toast({
                message: '关注成功',
                icon: 'like-o',
                });
               }else if(this.gz == '已关注'){
                this.gz = '+ 关注'
                this.m--
                this.$toast('已取消关注');
               }
            },
            onimg(){
                ImagePreview([
                '/company/sheji1-1.jpg',
                '/company/sheji1-2.jpg',
                '/company/sheji1-3.jpg',
                ]);
            }
        }
    }
</script>

<style lang="scss" scoped>
#bg{
    background-size:100% auto;
    background-image: url("/public/company/sheji1-1.jpg");
    #top{
        height: 180px;
        #icon{
            position: fixed;
            top: 16px; 
        }
    }
    #body{
        position: relative;
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
        background: #fff;
        #tx{
        width: 70px;
        height: 70px;
        border-radius: 50%;
        position: absolute;
        width: 70px;
        height: 70px;
        left: 20px;
        top: -20px;
        overflow: hidden; 
        img{
            width: 100%;
        }
        }
        #btn{
            width: 73px;
            height: 34px;
            color: #fff;
            background: linear-gradient(266.23deg, #4960F7 0%, #6A97FA 100%);
            border: 0;
            border-radius: 2px;
            position: absolute;
            left: 282px;
            top: 16px;
            &.active{
                background: gray;
            }
        }
        h4{
            text-align: left;
            padding-left: 20px;
        }
        #bq{
            display: flex;
            span{
                color: #A94E20;
                background: #F9F9F9;
                border-radius: 10px;
                padding: 3px;
                margin-left: 25px;
                font-size: 0.8em;
            }
        }
        #guanzhu{
            margin: 20px 0;
            display: flex;
            span{
                margin-left: 20px;
                color: #999999;
                b{
                    color: #000;
                }
            }
        }
        #anli{
            display: flex;
            flex-wrap: wrap;
            .xiaoguo{
                width: 175px;
                height: 220px;
                padding: 10px;
                img{
                    width: 100%;
                }
            }
        }
        button{
            background: linear-gradient(266.23deg, #4960F7 0%, #6A97FA );
            width: 90%;
            position: fixed;
            bottom: 1%;
            left: 5%;
        }
    }
}
</style>